<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenLayers Dynamic WMS Example</title>
    <style>
        .map {
            width: 100%;
            height: 500px;
        }
    </style>
    <link rel="stylesheet" href="https://data.sunbt.ltd/lib/ol/v6.15.1/css/ol.css" type="text/css">
    <script src="https://data.sunbt.ltd/lib/ol/v6.15.1/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
    var wmsSource = new ol.source.TileWMS({
        url: 'http://10.56.9.37:32011/geoserver/geoHazard/wms',
        params: {
            'SERVICE': 'WMS',
            'VERSION': '1.1.1',
            'REQUEST': 'GetMap',
            'FORMAT': 'image/png',
            'TRANSPARENT': true,
            'STYLES': '',
            'LAYERS': 'geoHazard:cktx_yfx',
            'exceptions': 'application/vnd.ogc.se_inimage'
        },
        serverType: 'geoserver'
    });

    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            new ol.layer.Tile({
                source: wmsSource
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([119.3685, 32.9397]), // 江苏省的中心坐标
            zoom: 8
        })
    });

    // 获取WMS的初始BBOX并设置视图范围
    wmsSource.once('tileloadend', function() {
        var view = map.getView();
        var extent = wmsSource.getTileGrid().getExtent();
        view.fit(extent, { size: map.getSize(), maxZoom: 16 });
    });
</script>
</body>
</html>
